<template>
  <div id="app" style="margin-top: 0px;">
    <table style="background-color: #00F;border-radius: 20px;padding: 10px 20px;margin: 40px auto;">
      <tr style="font-size: 24px;width: 200px;display: flex;justify-content: space-around;">
        <td style="color:#FFF;padding: 0px;">诉讼请求:</td>
        <td style="color: #FF0;padding: 0px;">{{data.ssqq}}</td>
      </tr>
      <tr>
        <td style="padding-top: 10px;padding-bottom:10px;display: flex;justify-content: space-between;width: 200px;">
          <img
              v-for="(item, index) in data.qqlx" :key="index"
              style="width: 36px;height: 36px;" :alt="item.name" :title="item.name" :src="item.image_url"
              @click="typeClick(item.type)"
          />
        </td>
      </tr>
    </table>
    <div style="display: flex;flex-direction: row;margin-right: 10px;">
      <TreeChart :json="data" :class="{landscape: landscape.length}" @click-node="clickNode" />
      <div style="display: flex;flex-direction: column;">
        <table class="party">'
          <tr>
            <td class="title" colspan="2">当事人信息:</td>
          </tr>
          <tr>
            <td class="title">原告</td>
            <td class="content">{{ data.name }}</td>
          </tr>
          <tr>
            <td class="title">地址</td>
            <td class="content-odd">{{ data.address }}</td>
          </tr>
        </table>
        <table class="party">
          <tr>
            <td class="title">被告</td>
            <td class="content">{{ data.mate[0].name }}</td>
          </tr>
          <tr>
            <td class="title">地址</td>
            <td class="content-odd">{{ data.mate[0].address }}</td>
          </tr>
        </table>
        <table class="party" v-for="(childItem,childIndex) in data.children" :key="childIndex">
          <tr>
            <td class="title" colspan="2">孩子{{childIndex+1}} 信息:</td>
          </tr>
          <tr>
            <td class="title">类型</td>
            <td class="content">{{childItem.type}}</td>
          </tr>
          <tr>
            <td class="title">姓名</td>
            <td class="content-odd">{{ childItem.name }}</td>
          </tr>
          <tr>
            <td class="title">年龄</td>
            <td class="content">{{ childItem.age }} 岁</td>
          </tr>
          <tr>
            <td class="title">目前现状</td>
            <td class="content-odd">{{ childItem.status }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import TreeChart from "@/components/TreeChart";

export default {
  name: 'app',
  components: {
    TreeChart
  },
  data() {
    return {
      landscape: [],
      data: {
        ssqq:"离婚纠纷",
        qqlx:[
          {
            type:"type01",
            name:"子女抚养纠纷",
            image_url:"/img/type01.png"
          },
          {
            type:"type02",
            name:"离婚损害赔偿",
            image_url:"/img/type02.png"
          },
          {
            type:"type03",
            name:"财产分割",
            image_url:"/img/type03.png"
          },
          {
            type:"type04",
            name:"经济补偿",
            image_url:"/img/type04.png"
          }
        ],
        callName:'原告',
        name: '王某丽',
        age:40,
        sex:0,
        soldier:true,
        address:"北京市海淀区学院路八家嘉苑5号楼3单元2901",
        image_url: "/img/1.png",
          mate: [
              {
                callName:'被告',
                name: '张某峰',
                age:40,
                sex:1,
                soldier:true,
                address:"北京市海淀区学院路八家嘉苑5号楼3单元2901",
                image_url: "/img/2.png",
              }
          ],
        children: [
          {
            type:'被告子女',
            callName:'长子',
            name: '张迪',
            sex:1,
            age:10,
            status:'随被告父母生活',
            image_url: "https://static.refined-x.com/static/avatar.jpg"
          },
          {
            type:'共同婚生子女',
            callName:'次子',
            name: '张启',
            sex:1,
            age:6,
            status:'与原告生活',
            image_url: "https://static.refined-x.com/static/avatar.jpg"
          }
        ]
      }
    }
  },
  methods: {
    typeClick:function(index){
      alert(index)
    },
    clickNode: function(node){
      // eslint-disable-next-line
      console.log(node)
        alert(node.name)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.party tr .title{background-color: #e0e0e0; color: #000; vertical-align: bottom; width: 100px;font: 18px arial,sans-serif;}
.party tr .content{background-color: #f2f2f2;text-align: left; }
.party tr .content-odd{background-color: transparent;text-align: left; }
#app .avat{border-radius: 2em;border-width:2px;}
#app .name{font-weight:700;}
#app .rootNode .name{
  color: red;
}

.foot {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #333;
    padding: 24px;
    overflow: hidden;
    color: #999;
    font-size: 14px;
    text-align: center;
}
.foot a{color:#fff;margin:0 .5em}

</style>
